<template>
  <div class="xu">
    <div style=" height: 40px;">
      <span class="jianbian"
        style=" width: 100%; line-height: 50px; padding-left: 30px; font-size: 24px;">本月销售实时实况</span>
    </div>
    <div style="width: 100%; height: 390px; " ref="broekn">

    </div>
  </div>
</template>

<script>

import * as echarts from 'echarts'
// import dayjs from 'dayjs'
import { SalesDateAPI } from '@/api/brokenline'
export default {
  data() {
    return {
      weekName: [
        '星期六', '星期五', '星期四', '星期三', '星期二', '星期一', '星期日'
      ],
      list: []
    }
  },
  mounted() {
    // this.getWeekList()
    // this.SalesDateFn()
    this.BrokenEchartData()
    // 销售时间
  },
  methods: {
    // 销售时间
    // async SalesDateFn() {
    //   const { data } = await SalesDateAPI()

    //   const a = data.dateList
    //   this.list = a.map(i => {
    //     const b = i + '日'
    //     return b
    //   })
    //   console.log(this.list)
    // },
    // getStartTime(time) {
    //   const nowTimeDate = new Date(time)
    //   return nowTimeDate.setHours(0, 0, 0, 0)
    // },

    // 时间戳转日期格式
    // timestampToTime(timestamp) {
    //   const date = new Date(timestamp)
    //   const Y = date.getFullYear() + '-'
    //   const M =
    //     (date.getMonth() + 1 < 10
    //       ? '0' + (date.getMonth() + 1)
    //       : date.getMonth() + 1) + '-'
    //   const D = date.getDate()
    //   // var h = date.getHours() + ':';
    //   // var m = date.getMinutes() + ':';
    //   // var s = date.getSeconds();
    //   // return Y + M + D + ' ' + h + m + s
    //   return Y + M + D
    // },
    // 获取一周的日期
    // getWeekList(type) {
    //   const week = []
    //   for (let i = 0; i < 7; i++) {
    //     const weekObj = {
    //       name: this.weekName[i],
    //       date: '',
    //       timeStamp: ''
    //     }
    //     week.push(weekObj)
    //   }
    //   const today = this.getStartTime(Number(new Date())) // 当天时间戳
    //   const todayweek = new Date().getDay() // 当天星期几
    //   if (todayweek === 0) {
    //     // 若当天为周日
    //     week[6].timeStamp = today
    //   } else {
    //     week[todayweek - 1].timeStamp = today
    //   }

    //   const leftNum = todayweek - 1 // 本周内今天的前几天的数量

    //   const rightNum = 7 - todayweek // 本周内今天的后几天的数量

    //   for (let left = 0; left < leftNum; left++) {
    //     week[left].timeStamp =
    //       today - (todayweek - left - 1) * -1000 * 60 * 60 * 24// 减号换加号为后七天
    //   }
    //   for (let right = 0; right < rightNum; right++) {
    //     week[right + todayweek].timeStamp =
    //       today + (right + 1) * -1000 * 60 * 60 * 24// 减号换加号为后七天  right+ 1没有当前天,去第有当前天
    //   }
    //   week.map((el) => {
    //     el.date = this.timestampToTime(el.timeStamp)
    //     return el.data
    //   })
    //   // 格式化
    //   this.weekList = JSON.parse(JSON.stringify(week))
    //   const time = this.weekList.map(i => {
    //     return `${dayjs(i.date).format('DD')}日`
    //   })
    //   // 删除第一个
    //   const array = time.filter((item, index) => index > 0)
    //   this.list = array
    // },
    // 折现图配置
    async BrokenEchartData() {
      const broekn = this.$refs.broekn

      const myChart = this.$echarts.init(broekn)
      const option = {
        // backgroundColor: '#0c2d55',
        legend: {
          left: 'center',
          bottom: 10,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 12,
          itemHeight: 12
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'transparent',
          borderWidth: 1,
          borderColor: '#106b9e',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          borderWidth: 0,
          top: '15%',
          bottom: '15%',
          left: '10%',
          right: '8%',
          textStyle: {
            color: '#ccc'
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#48598a',
                fontSize: '20'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#62B4BB', // x轴字体颜色文字大小配置
                fontSize: '20'
              }
            },
            data: []
          }
        ],

        yAxis: [
          {
            // name: '指数',
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#62B4BB', // x轴字体颜色文字大小配置
                fontSize: '20'
              }
            },
            axisTick: {
              show: true
            }
          }
        ],
        series: [
          {
            type: 'line',
            symbolSize: 10,
            symbol: 'circle',
            // itemStyle: {
            //   color: '#25a8ff'
            // },

            label: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 14,
                fontFamily: 'DIN'
              },
              position: 'top',
              formatter: function (p) {
                return p.value > 0 ? p.value : ''
              }
            },
            // itemStyle: { // 拐点的样式
            //   color: 'rgba(244,253,255,1)',
            //   borderWidth: 1,
            //   borderColor: 'rgba(87, 183, 242, 1)'
            // },
            // lineStyle: { // 线条的样式
            //   width: 5,
            //   color: 'rgba(34, 153, 254)'
            // },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#25a8ff'
                },
                {
                  offset: 1,
                  color: '#25a8ff'
                }
              ])
            }

          },
          {
            type: 'line', // 小圆点配置
            symbolSize: 12,
            // symbol: 'circle',//开启为实心
            itemStyle: {
              normal: {
                color: '#bafffc',
                width: '15px',
                lineStyle: {
                  color: '#00e2fd',
                  width: 7
                }
              }
            },
            label: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 14,
                fontFamily: 'DIN'
              },
              position: 'top',
              formatter: function (p) {
                return p.value > 0 ? p.value : ''
              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(87, 183, 242, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(6,37,55,0)'
                }
              ])
            },
            data: [80, 75, 70, 80, 90, 95, 85]
          }
        ]
      }
      option && myChart.setOption(option)
      const { data } = await SalesDateAPI()
      // 动态加载
      const a = data.dateList
      this.list = a.map(i => {
        const b = i + '日'
        return b
      })
      console.log(this.list)
      myChart.setOption({
        xAxis: {
          data: this.list // 填入X轴数据
        }
      })
    }

  }
}
</script>

<style lang="less" scoped>
.xu {
  width: 540px;
  height: 100%;
  background-image: url(../../assets/地图背景图/边框.png);
  background-size: 100% 100%;
}
</style>
